<template>
  <div>
    <!-- 头部区域 -->
    <div class="hearde">
<div class="hearder">
      <el-card class="cards">
     <el-row style="height: 40px; width: 100%;">
         <el-col :span="24">
          <div class="grid-content">
<el-form :inline="true" :model="form" >
  <el-form-item label="工单编号" >
    <el-input v-model="allsea.taskCode" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="工单状态">
    <el-select v-model="allsea.status" placeholder="请选择">
      <el-option
      v-for="item in alls"
      :key="item.statusId"
       :label="item.statusName"
       :value="item.statusId">
       </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="chaxun">查询</el-button>
  </el-form-item>
</el-form> </div></el-col></el-row></el-card>
    </div>
    </div>
    <!-- 头部结尾 -->

    <div class="opans">
<el-card class="card">
<el-row>
  <el-col :span="24"><div>
     <el-button icon="el-icon-circle-plus" type="danger" @click="xinjian">新建</el-button>
    </div>
    </el-col>
                   <!-- 新增工单弹窗区域 -->
    <el-dialog title="提示"  :visible="dialogVisible" @close="dialogClosesr" width="40%">
<el-form :model="ruleForm" :rules="rules" ref="ruleForms" label-width="100px">
      <el-form-item label="设备编号：" prop="innerCode">
  <el-input
  @input="inp"
  v-model="ruleForm.innerCode"
   placeholder="请输入"
   maxlength="15"
   show-word-limit></el-input>
  </el-form-item>
  <el-form-item label="工单类型：" prop="productType">
    <el-select v-model="ruleForm.productType" placeholder="请选择">
     <el-option
      v-for="item in Task"
      :key="item.typeId"
      :label="item.typeName"
      :value="item.typeId">
      </el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="运维人员:" prop="assignorId">
   <el-select v-model="ruleForm.assignorId" placeholder="请选择">
     <el-option
      v-for="item in opes"
      :key="item.userId"
      :label="item.userName"
      :value="item.userId">
      </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="备注" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注(不超过40字)" maxlength="40" show-word-limit></el-input>
  </el-form-item>
</el-form>
  <span slot="footer">
    <el-button @click="dialogClosesr">取 消</el-button>
    <el-button type="primary" @click="sumbit">确 定</el-button>
  </span>
</el-dialog>
</el-row>
     <!-- 表格开始区域 -->
<el-row>
 <el-table :data="currPage"    style="width: 100%">
      <el-table-column label="序号" prop="index" align="center" type="index" width="70">
       <template slot-scope="scope">
        <span>{{ scope.$index + (allsea.pageIndex - 1) * allsea.pageSize + 1 }}</span>
      </template>
      </el-table-column>
      <el-table-column prop="taskCode" label="工单编号" width="140"></el-table-column>
      <el-table-column prop="innerCode" label="设备编号" width="140"></el-table-column>
      <el-table-column prop="taskType" label="工单类型" width="140"></el-table-column>
      <el-table-column prop="createType" label="工单方式" width="140">
        <template #default="{ row }">
               {{ create[row.createType] }}
            </template>
      </el-table-column>
      <el-table-column prop="taskStatusTypeEntity.statusName" label="工单状态" width="140"></el-table-column>
      <el-table-column prop="userName" label="运营人员" width="130"></el-table-column>
      <el-table-column prop="updateTime" label="创建日期" width="160">
        <template #default="{ row }">
     {{ formatDate(row.updateTime) }}
    </template>
      </el-table-column>
      <el-table-column label="操作" width="130">
         <template>
          <el-button type="text" size="small">查看详情</el-button>
          </template>
      </el-table-column>
    </el-table>
     <!-- 表格结尾区域 -->
</el-row>
 <!-- 分页开始区域 -->
     <el-row type="flex" justify="center" align="middle" style="height: 60px">
      <el-pagination :total="total" layout="total,prev, pager, next"  />
         </el-row>
     <!-- 分页结束区域 -->

</el-card>
    </div>
  </div>
</template>

<script>
import { allSearch, alltask, Create, taskType, operator } from '@/api'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      form: {
        taskCode: '',
        status: ''
      },
      dialogVisible: false,
      ruleForm: {
        innerCode: '',
        productType: '',
        userId: 1,
        assignorId: '',
        createType: 1,
        details: [],
        desc: ''
      },
      rules: {
        innerCode: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        userId: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      },
      allsea: {
        pageIndex: 1, // 当前页面
        pageSize: 10, // 每页显示数量
        isRepair: false,
        taskCode: '', // 工单编号
        status: ''// 工单状态
      },
      create: {
        0: '自动',
        1: '手动'
      },
      currPage: [], // 表格列表数据
      total: 0, // 总页数
      alls: [], // 选择列表数据
      Task: [], // 所有工单类型数据
      opes: [] // 运维人员数据
    }
  },
  async created () {
    // 工单状态列表数据
    const all = await alltask()
    this.alls = all.data
    // 获取所有工单类型
    const task = await taskType()
    this.Task = task.data
    this.getTaskSearch() // 表格数据
  },
  methods: {
    // 格式化时间
    formatDate (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    async inp (valu) {
      // 获取运维人员数据
      const ope = await operator(valu)
      this.opes = ope.data
    },
    // 工单表格数据接口
    async getTaskSearch () {
      const allsear = await allSearch(this.allsea)
      this.currPage = allsear.data.currentPageRecords
      this.total = Number(allsear.data.totalCount)// 获取总页数
    },
    // 查询
    chaxun () {
      this.getTaskSearch()
    },
    // 新建
    xinjian () {
      this.dialogVisible = true
    },
    // 弹窗关闭
    dialogClosesr () {
      this.dialogVisible = false
      this.$refs.ruleForms.resetFields() // 重置表单
    },
    // 确定新建
    sumbit () {
      this.$refs.ruleForms.validate(async (valid) => {
        if (!valid) return
        // console.log(this.ruleForm)
        await Create(this.ruleForm)
        this.$message.success('新增角色成功')
        this.dialogClosesr()
        this.getTaskSearch()
      })
    }
  }

}
</script>

<style scoped lang="less">
.hearde{
  padding: 10px;
.cards{
 padding: 5px
}
}
.opans{
  padding: 10px;
  .card{
 padding: 5px
  }
}
</style>
